<template>
  <div class="index-page">
    <pageHead title='订单详情'></pageHead>
    <div class="form">
      <ul>
        <li class="clearfix">
          <div class="view">
            <span class="fl">编号：</span>
            <p class="fl">FXB144165039</p>
          </div>
        </li>
        <li class="clearfix">
          <div class="view">
            <span class="fl">订单时间：</span>
            <p class="fl">2018.04.27 17:09</p>
          </div>
        </li>
        <li class="clearfix">
          <div class="view">
            <span class="fl">类型：</span>
            <p class="fl">提供帮助</p>
          </div>
        </li>
        <li class="clearfix">
          <div class="view">
            <span class="fl">社区：</span>
            <p class="fl">贫困社区</p>
          </div>
        </li>
        <li class="money clearfix">
          <div class="view">
            <span class="fl">金额：</span>
            <p class="fl">￥3000</p>
          </div>
        </li>
        <li class="time clearfix">
          <div class="view">
            <span class="fl">剩余时间：</span>
            <p class="fl">190小时</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import pageHead from '@/components/include/header'
export default {
  components: { pageHead },
  data () {
    return {}
  },
  activated: function () {},
  mounted: function () {},
  methods: {},
  destroyed: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.index-page {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #f3f3f3;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  .form {
    position: absolute;
    top: 0.88rem;
    left: 0;
    right: 0;
    bottom: 0;
    li {
      background: #fff;
      margin-top: 0.1rem;
      .view {
        width: 6.9rem;
        margin-left: auto;
        margin-right: auto;
        height: 1rem;
        line-height: 1rem;
        font-size: 0.3rem;
        color: #313131;
        span {
            width: 2.1rem;
        }
      }
      &.money {
          .view {
              p {
                  color: #29b15f;
              }
          }
      }
      &.time {
          .view {
              p {
                  color: #ff0000;
              }
          }
      }
    }
  }
}
</style>
